<template>
  <div class="layui-layout layui-layout-admin">
    <div class="adminnav1">
      <Pagetop></Pagetop>
    </div>
    <div class="adminnav2">
      <Secondnav urlname="homepage"></Secondnav>
    </div>
    <!-- 主体内容 -->
    <div class="layui-body kedou-admin" id="LAY_app_body app">
      <div class="layadmin-tabsbody-item layui-show">
        <div class="pagelist" style="padding:0">

          <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
              <li class="layui-this">代理进货包邮</li>
              <li>零食小店包邮</li>
              <li>内购商品包邮</li>
            </ul>
            <div class="layui-tab-content" style="padding:50px 0">
              <div class="layui-tab-item layui-show">

                <div class="layui-card-body cardbody">
                  <div class="layui-form" lay-filter="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">是否开启包邮</label>
                      <div class="layui-input-block">
                        <input type="checkbox" name="close" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
                      </div>

                      <div class="layui-card-body" style="display:block;">
                        <div style="padding: 0 20px 20px 40px;">
                          <span style="font-size: 18px; font-weight: 700;">
                            包邮规则
                          </span>
                          <span>
                            请更改设置后点击保存！每个商品前可输入最低包邮数量，单次购买未达到数量的商品不包邮
                          </span>
                          <button type="button" class="layui-btn layui-btn-normal" style="float:right;">
                            新增地区
                          </button>
                        </div>
                      </div>
                      <div class="layui-card-body" style="border: solid 1px #ececec;">
                        <div>
                          <div class="line-test">
                            <label class="layui-form-label">
                              包邮区域:
                            </label>
                            <button type="button" class="layui-btn layui-btn-normal" @click="ch1">
                              选择地区
                            </button>
                            <div style="float:right;">
                              <button type="button" class="layui-btn layui-btn-normal">
                                复制
                              </button>
                              <button type="button" class="layui-btn layui-btn-primary">
                                删除
                              </button>
                            </div>
                          </div>
                        </div>
                        <div style="margin-bottom: 14px; margin-left: 154px;">
                          <div class="layui-form-item" pane="">
                            <input type="checkbox" name="1" lay-skin="primary" title="仅对向总部进货的代理商适用包邮规则">
                          </div>
                        </div>
                        <div class="container-rule">
                          <div class="text" style="border: solid 1px #ececec; margin-left:154px; position: relative">
                            <div style="display:flex">
                              <div style="width:90px;height:90px;">对以下商品,</div>
                              <div style="margin-top:6px">
                                <div class="layui-form-item" pane="">
                                  <label>
                                    <input type="checkbox" name="m1" lay-skin="primary" title="金额满">
                                    <input type="number" name="title" min="0" autocomplete="off"
                                      style="height:30px;width:80px;"> 元包邮
                                    <button type="button" class="layui-btn" @click="ch2">选择商品</button>
                                  </label>
                                </div>
                                <div class="layui-form-item" pane="">
                                  <label>
                                    <input type="checkbox" name="m2" lay-skin="primary" title="件数满">
                                    <input type="number" name="title" min="0" autocomplete="off"
                                      style="height:30px;width:80px;"> 件包邮
                                  </label>
                                </div>
                              </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-normal"
                              style="top:20px; right:10px;position:absolute;">删除规则</button>
                          </div>

                        </div>
                        <div style="margin:20px 0 14px 154px;">
                          <button type="button" class="layui-btn">新增规则</button>
                        </div>
                      </div>

                      <div class="layui-form-item">
                        <div class="layui-input-block">
                          <button type="button" class="layui-btn layui-btn-normal">保存</button>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <div class="layui-tab-item">
                <div class="layui-card-body cardbody">
                  <div class="layui-form" lay-filter="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">是否开启包邮</label>
                      <div class="layui-input-block">
                        <input type="checkbox" name="close" lay-skin="switch" lay-text="开启|关闭">
                      </div>

                      <div class="layui-card-body" style="display:block;">
                        <div style="padding: 0 20px 20px 40px;">
                          <span style="font-size: 18px; font-weight: 700;">
                            包邮规则
                          </span>
                          <span>
                            请更改设置后点击保存！每个商品前可输入最低包邮数量，单次购买未达到数量的商品不包邮
                          </span>
                          <button type="button" class="layui-btn layui-btn-normal" style="float:right;">
                            新增地区
                          </button>
                        </div>
                      </div>
                      <div class="layui-card-body" style="border: solid 1px #ececec;">
                        <div>
                          <div class="line-test">
                            <label class="layui-form-label">
                              包邮区域:
                            </label>
                            <button type="button" class="layui-btn layui-btn-normal" @click="ch1">
                              选择地区
                            </button>
                            <div style="float:right;">
                              <button type="button" class="layui-btn layui-btn-normal">
                                复制
                              </button>
                              <button type="button" class="layui-btn layui-btn-primary">
                                删除
                              </button>
                            </div>
                          </div>
                        </div>
                        <div style="margin-bottom: 14px; margin-left: 154px;">
                          <div class="layui-form-item" pane="">
                            <input type="checkbox" name="1" lay-skin="primary" title="仅对向总部进货的代理商适用包邮规则">
                          </div>
                        </div>
                        <div class="container-rule">
                          <div class="text" style="border: solid 1px #ececec; margin-left:154px; position: relative">
                            <div style="display:flex">
                              <div style="width:90px;height:90px;">对以下商品,</div>
                              <div style="margin-top:6px">
                                <div class="layui-form-item" pane="">
                                  <label>
                                    <input type="checkbox" name="2" lay-skin="primary" title="金额满">
                                    <input type="number" name="title" min="0" autocomplete="off"
                                      style="height:30px;width:80px;"> 元包邮
                                    <button type="button" class="layui-btn" @click="ch2">选择商品</button>
                                  </label>
                                </div>
                                <div class="layui-form-item" pane="">
                                  <label>
                                    <input type="checkbox" name="3" lay-skin="primary" title="件数满">
                                    <input type="number" name="title" min="0" autocomplete="off"
                                      style="height:30px;width:80px;"> 件包邮
                                  </label>
                                </div>
                              </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-normal"
                              style="top:20px; right:10px;position:absolute;">删除规则</button>
                          </div>

                        </div>
                        <div style="margin:20px 0 14px 154px;">
                          <button type="button" class="layui-btn">新增规则</button>
                        </div>
                      </div>

                      <div class="layui-form-item">
                        <div class="layui-input-block">
                          <button type="button" class="layui-btn layui-btn-normal">保存</button>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

              <div class="layui-tab-item">
                <div class="layui-card-body cardbody">
                  <div class="layui-form" lay-filter="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">是否开启包邮</label>
                      <div class="layui-input-block">
                        <input type="checkbox" name="close" lay-skin="switch" lay-text="开启|关闭">
                      </div>

                      <div class="layui-card-body" style="display:block;">
                        <div style="padding: 0 20px 20px 40px;">
                          <span style="font-size: 18px; font-weight: 700;">
                            包邮规则
                          </span>
                          <span>
                            请更改设置后点击保存！每个商品前可输入最低包邮数量，单次购买未达到数量的商品不包邮
                          </span>
                          <button type="button" class="layui-btn layui-btn-normal" style="float:right;">
                            新增地区
                          </button>
                        </div>
                      </div>
                      <div class="layui-card-body" style="border: solid 1px #ececec;">
                        <div>
                          <div class="line-test">
                            <label class="layui-form-label">
                              包邮区域:
                            </label>
                            <button type="button" class="layui-btn layui-btn-normal" @click="ch1">
                              选择地区
                            </button>
                            <div style="float:right;">
                              <button type="button" class="layui-btn layui-btn-normal">
                                复制
                              </button>
                              <button type="button" class="layui-btn layui-btn-primary">
                                删除
                              </button>
                            </div>
                          </div>
                        </div>
                        <div style="margin-bottom: 14px; margin-left: 154px;">
                          <div class="layui-form-item" pane="">
                            <input type="checkbox" name="1" lay-skin="primary" title="仅对向总部进货的代理商适用包邮规则">
                          </div>
                        </div>
                        <div class="container-rule">
                          <div class="text" style="border: solid 1px #ececec; margin-left:154px; position: relative">
                            <div style="display:flex">
                              <div style="width:90px;height:90px;">对以下商品,</div>
                              <div style="margin-top:6px">
                                <div class="layui-form-item" pane="">
                                  <label>
                                    <input type="checkbox" name="2" lay-skin="primary" title="金额满">
                                    <input type="number" name="title" min="0" autocomplete="off"
                                      style="height:30px;width:80px;"> 元包邮
                                    <button type="button" class="layui-btn" @click="ch2">选择商品</button>
                                  </label>
                                </div>
                                <div class="layui-form-item" pane="">
                                  <label>
                                    <input type="checkbox" name="3" lay-skin="primary" title="件数满">
                                    <input type="number" name="title" min="0" autocomplete="off"
                                      style="height:30px;width:80px;"> 件包邮
                                  </label>
                                </div>
                              </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-normal"
                              style="top:20px; right:10px;position:absolute;">删除规则</button>
                          </div>

                        </div>
                        <div style="margin:20px 0 14px 154px;">
                          <button type="button" class="layui-btn">新增规则</button>
                        </div>
                      </div>

                      <div class="layui-form-item">
                        <div class="layui-input-block">
                          <button type="button" class="layui-btn layui-btn-normal">保存</button>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagetop from "../common/pagetop.vue";
import Secondnav from "../common/secondnav.vue";
export default {
  name: "byset",
  components: { Pagetop, Secondnav },
  data () {
    return {

    };
  },
  mounted () {
    layui.use('element', function () {
      var element = layui.element;
    })
  },
  methods: {
    ch1: function () {
      layer.open({
        type: 2
        , title: '选择地区'
        , content: 'http://localhost:8080/#/bysetch1'
        , area: ['50%', '70%']
      });
    },
    ch2: function () {
      layer.open({
        type: 2
        , title: '选择商品'
        , content: 'http://localhost:8080/#/bysetch2'
        , area: ['70%', '70%']
      });
    },
    updated: function () {
      layui.use(["form", "table"], function () {
        var form = layui.form
          , table = layui.table;
        form.render();
      })
    }
  },
};
</script>
<style scoped>
.layui-form-label {
  width: 120px;
}
.layui-input-block {
  margin-left: 230px;
  min-height: 60px;
}
/*二级导航*/
</style>